<template>
  <div class="goods">
    <!-- 1. 搜索区域 -->
    <div class="header">
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </div>
    <!-- 2. 表格区域展示视图数据 -->
    <div class="wrapper">
      <el-table :data="filteredTableData" border>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="商品ID" width="100"></el-table-column>
        <el-table-column prop="title" label="商品名称" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="price" label="商品价格" width="100"></el-table-column>
        <el-table-column prop="num" label="商品数量" width="100"></el-table-column>
        <el-table-column prop="category" label="规格类目" width="100"></el-table-column>
        <el-table-column prop="image" label="商品图片" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sellPoint" label="商品卖点" show-overflow-tooltip></el-table-column>
        <el-table-column prop="descs" label="商品描述" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="230">
          <template slot-scope="scope">
            <el-button size="mini">查看</el-button>
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      tableData: [
        {
          id: "1",
          price: "0.8",
          num: "5326",
          category: "蛋类",
          title: "鸡蛋",
        },
        {
          id: "2",
          price: "299",
          num: "125",
          category: "厨房用具",
          title: "电饭煲",
        },
        {
          id: "3",
          price: "99",
          num: "750",
          category: "调味品",
          title: "压榨花生油",
        },
        {
          id: "4",
          price: "88",
          num: "102",
          category: "奶制品",
          title: "纯牛奶",
        },
        {
          id: "5",
          price: "3",
          num: "2682",
          category: "调味品",
          title: "食用盐",
        },
        {
          id: "6",
          price: "899",
          num: "56",
          category: "运动服饰",
          title: "运动鞋",
        },
        {
          id: "7",
          price: "2",
          num: "120",
          category: "水果",
          title: "西瓜",
        },
        {
          id: "8",
          price: "75",
          num: "321",
          category: "肉制品",
          title: "牛肉干",
        },
        {
          id: "9",
          price: "9.9",
          num: "1278",
          category: "干果",
          title: "瓜子",
        },
        {
          id: "10",
          price: "10",
          num: "854",
          category: "糖果",
          title: "口香糖",
        },
      ],
    };
  },
  computed: {
    filteredTableData() {
      if (this.input === "") {
        return this.tableData;
      } else {
        return this.tableData.filter((item) => item.id === this.input);
      }
    },
  },
  methods: {
  handleEdit(index, row) {
    // 编辑逻辑
    this.$prompt("请输入新的商品名称", "编辑商品", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputValue: row.title,
    })
      .then((newTitle) => {
        if (newTitle !== null && newTitle !== "") {
          this.tableData[index].title = newTitle;
        } else {
          // 如果新商品名称为空，不进行任何操作
        }
      })
      .catch(() => {});
  },
  handleDelete(index, row) {
    this.tableData.splice(index, 1);
  },
  handleSearch() {
    // 实现查询逻辑
  },
},
};
</script>

<style lang="less" scoped>
.goods {
  margin: 20px;
}
.header {
  display: flex;
  button {
    margin-left: 20px;
  }
}
.wrapper {
  margin: 20px 0;
}
</style>